<template>
  <div class="feikuai">
    <div class="header">
      <!-- 左侧返回 -->
      <div class="is-left">
        <a-icon type="left" @click="$router.back()" />
      </div>
      <!-- 中间的输入框 -->
      <div>
        <a-input-search placeholder="搜索" 
        style="width: 200px;" 
        v-model="search_val"/>
      </div>
    </div>
    <div class="menu_view">
      <!-- 左侧菜单栏 -->
      <div class="menu_wrap" ref="menuScroll">
        <ul>
          <li :class="{ current: currentIndex === index }" v-for="(item, index) in categories" :key="index" @click="selectMenu(index)">
            {{item.name}}
          </li>
        </ul>
      </div>
      <!-- 右侧菜单栏 -->
      <div class="drinks_wrap" ref="drinkScroll">
        <ul>
          <li v-for="(item, index) in categories" :key="index" class="drink-list">
            <div class="drinks_title">
              <h3>{{item.name}}({{getItemProductAll(item)}})</h3>
            </div>
            <div class="drinks_detail">
              <ul>
                <li v-for="(subItem, index) in item.sub_categories" :key="index" >
                  <ul>
                    <li v-for="(drink,i) in subItem.products" :key="i" class="products">
                      <img :src="drink.default_image" alt="" :class="{ combo: drink.combo_type }">
                      <div class="drink_info" v-if="!drink.combo_type">
                        <span class="drink_name">{{drink.name}}</span>
                        <span class="drink_price">￥{{drink.price/100}}</span>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      search_val:"",//搜索结果
      categories:[],//api请求的页面数据
      menuScroll: {}, // 左侧滚动对象
      drinkScroll: {}, // 右侧滚动对象
      scrollY: 0, // 右侧菜单当前滚动到的y值
      listHeight: [], // 13个区列表高度
    };
  },
  watch:{
   search_val() {
      let el = null;

      el = Array.from(this.pageEle).find((item) => {
        return (
          this.search_val !== "" &&
          item.innerText.indexOf(this.search_val) !== -1
        );
      });

      if (el) {
        this.drinkScroll.scrollToElement(el, 250);
      } else {
        console.log(el);
        this.drinkScroll.scrollTo(0, 0,250);
        this.menuScroll.scrollTo(0, 0,250);
      }
    },
  },
  computed:{
    pageEle() {
      return this.$refs.drinkScroll.getElementsByClassName("drink_name");
    },
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let h1 = this.listHeight[i];
        let h2 = this.listHeight[i + 1];

        // 判断是否在两个高度之间
        if (this.scrollY >= h1 && this.scrollY < h2) {
          return i;
        }
      }

      return 0;
    },
  },
  methods: {
    getItemProductAll(item){
      let count=0;

      item.sub_categories.forEach((ele)=>{
        count+=ele.products.length;
      })

      return count;
    },
    initScroll(){
      this.menuScroll=new BScroll(this.$refs.menuScroll,{
        click:true
      })
      this.drinkScroll=new BScroll(this.$refs.drinkScroll,{
        click:true,
        probeType:3,//3：实时触发
      })
      this.drinkScroll.on("scroll",pos=>{
        //console.log(pos);
        this.scrolly=Math.abs(Math.round(pos.y))
      })

    },
    selectMenu(index){
      let drinkList=this.$refs.drinkScroll.getElementsByClassName('drink-list');

      let el=drinkList[index];

      //滚动到对应元素的位置
      this.drinkScroll.scrollToElement(el,250);
    },
     calculateHeight(){
       let drinkList=this.$refs.drinkScroll.getElementsByClassName('drink-list');
       // 每个区的高度添加到数组中
       let height=0;

       this.listHeight.push(height);

      for (let index = 0; index < drinkList.length-1; index++) {
        let item=drinkList[index];
        //累加
        height+=item.clientHeight;
        this.listHeight.push(height) 
      }
     }
  },
  mounted() {
    this.$http.get('/api/getMenu').then(
      (res)=>{
        this.categories=res.data.data.categories;
        this.$nextTick(()=>{
          //Dom更新后初始化滚动
          this.initScroll();

          //计算一下各个区域的高度
          this.calculateHeight();
        })
      },
      (err)=>{}
    )
  },
}

</script>
<style lang="scss" scoped>
.feikuai {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 4rem;
    background: $module-color;
    padding: $common-padding;
    display: flex;
    align-items: center;
    i {
      margin-right: $common-margin;
    }
  }
  .menu_view {
    display: flex;
    margin-top: $common-margin;
    box-sizing: border-box;
    overflow: hidden;
    height: calc(100% - 4rem);
    .menu_wrap {
      ul {
        li {
          height: 4rem;
          padding: $common-padding;
          display: flex;
          align-items: center;
        }
      }
    }
    .drinks_wrap {
      background: $module-color;
      padding: $common-padding;
      h3 {
        font-size: 20px;
        font-weight: bolder;
      }
      .drinks_title {
        padding-left: $common-padding;
      }
      .products {
        display: flex;
        img {
          width: 6rem;
          margin-right: $common-margin;
        }
        .drink_info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 16px;
          .drink_name {
            font-weight: bolder;
          }
        }
      }
    }
  }
}

.current {
  background: $module-color;
}
.combo {
  width: 15rem !important;
  margin: 5px;
}
</style>
